<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">
    <script type="text/javascript" src="easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
</head>

<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<!--<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>-->
<!--<div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>-->
<div data-options="region:'west',title:'导航',split:true,href:'frame/navigation.html'" style="width:200px;" >
</div>
<div data-options="region:'center'" style="background:#eee;">
    <div id="tt" class="easyui-tabs" data-options="fit:'true',border:'false'" style="width:500px;height:250px;">
        <div title="首页" style="padding:20px;display:none;">
            欢迎
        </div>
        <!--<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
            tab3
        </div>-->
    </div>

</div>
</body>
<script type="text/javascript">
    function tab_add(title, url) {
        if ($('#tt').tabs('exists', title)) {
            $('#tt').tabs('select', title)
        } else {
            var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add', {
                title: title,
                content: content,
                closable: true
            });
        }
    }
</script>

</html>